<template>
  <a class="case-item-container" :href="data.link || null">
    <div class="img">
      <img :src="data.img ? data.img : tempImg" alt="" />
    </div>
    <div class="texts">
      <div class="title">
        {{ data.title }}
      </div>
      <div class="subtitle">
        {{ data.company }}
      </div>
      <div class="tag">
        {{ data.tag }}
      </div>
    </div>
  </a>
</template>

<script>
import tempImg from "@/assets/imgs/pic.png";
export default {
  props: {
    data: {
      required: true,
    },
  },
  data() {
    return {
      tempImg,
    };
  },
};
</script>

<style lang="scss" scoped>
.case-item-container {
  display: flex;
  height: 108px;
  cursor: pointer;
  .img {
    width: 146px;
    height: 100%;
    // object-fit: cover;
    flex: 0 0 auto;
    // overflow: hidden;
    margin-right: 1.5em;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .texts {
    width: 100%;
    height: 100%;
    position: relative;

    $text-color: #858484;
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .subtitle {
      font-size: 15px;
      color: $text-color;
    }
    .tag {
      color: $text-color;
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 15px;
    }
  }
}
</style>
